/*
* createTime：2019/10/25
* author：junyong.hong
* description:
*/
<template>
    <div class="recharge">
        <div class="recharge-box">
            <h2 class="title">充值金额</h2>
            <div class="input-box">
                <input v-model="money" class="input" type="number" placeholder="请输入充值金额">
            </div>
            <div class="item-num">
                <span :class="index == 1 ? 'checked' : ''" @click="choose(1)" class="num">1分</span>
                <span :class="index == 20 ? 'checked' : ''" @click="choose(20)" class="num">2毛</span>
            </div>
            <div class="item-num">
                <span :class="index == 100 ? 'checked' : ''" @click="choose(100)" class="num">1元</span>
                <span :class="index == 500 ? 'checked' : ''" @click="choose(500)" class="num">5元</span>
            </div>
            <button @click="pay" class="btn btn-primary btn-recharge">充值</button>
            <p class="tip">点击充值即表示已阅读并同意<a class="protocol" href="javascript:;">充值协议</a></p>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import API from './../api'
    import wx from 'weixin-js-sdk'

    export default {
        components: {},
        data() {
            return {
                index: 1,
                money: ''
            }
        },
        mounted() {

        },
        methods: {
            // 选中金额选项
            choose (index) {
                this.index = index
            },
            pay () {
                let _this = this
                if (this.money && /^\[1-9]\d*$/.test(this.money)) {
                    alert('输入的格式输入不正确')
                    return
                }

                let money = 0
                if (this.index) {
                    money = this.index
                }
                if (this.money) {
                    money = this.money * 100
                }
                this.$http.get(API.payWallet, {
                    params: {
                        money
                    }
                }).then((response) => {
                    let result = response.data
                    if (result && result.code == 0) {
                        // 通过微信的JS-API，拉起微信支付
                        let res = result.data

                        wx.chooseWXPay({
                            // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但新版本的支付后台生成签名使用的timeStamp字段名需要大写其中的S字符
                            tiemstamp: res.timestamp,
                            // 支付签名随机串，不长于32位
                            nonceStr: res.nonceStr,
                            // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*)
                            package: res.package,
                            // 前面方式，默认为'SHA1'，使用新版支付需要传入'MD5'
                            signType: res.signType,
                            // 支付签名
                            paySign: res.paySign,
                            success: function (res) {
                                // 支付成功后的回调函数
                                if (res.errMsg == 'chooseWXPay:ok') {
                                    alert('支付成功')
                                } else if (res.errMsg == 'chooseWXPay:fail') {
                                    alert('支付取消')
                                }
                            },
                            cancel: function () {
                                alert('支付取消')
                            },
                            fail: function (res) {
                                alert('支付失败' + res.message + ',' + res.errMsg)
                            }
                        })

                    } else {
                        alert(result.message)
                    }
                })
            }
        }
    }
</script>
<style>
    .recharge{
        background:#ffffff;
    }
    .recharge-box{
        padding:0 .3rem;
    }
    .recharge-box .title{
        font-size:.34rem;
        color:#333333;
        margin-top:.69rem;
    }
    .recharge-box .input-box{
        text-align:center;
        margin-top:.5rem;
        margin-bottom:.3rem;
    }
    .recharge-box .input-box .input{
        display: block;
        width:6.9rem;
        height:1rem;
        border:1px solid #D7D7D7;
        border-radius:5px;
        font-size:.3rem;
        color:#333333;
        text-align:center;
    }
    .item-num{
        display:flex;
        justify-content: space-between;
        margin-bottom: .31rem;
    }
    .item-num .num{
        height: 1.3rem;
        background-color: #F1F3F5;
        color: #333333;
        font-size: .32rem;
        width: 3.35rem;
        text-align: center;
        line-height: 1.3rem;
        border-radius:.08rem;
    }
    .item-num .num.checked{
        background-color: #FFEBE8;
        color:#FF3418;
    }
    .recharge-box .btn-recharge{
        /*此处3.9改成3，保证一屏可以看到，因为距离太大了*/
        display:block;
        margin:3rem auto .48rem;
        color:#FFFFFF;
        font-weight:400;
        box-shadow:0px 10px 18px 0px rgba(255,106,106,0.57);
    }
    .recharge-box .tip{
        font-size:.28rem;
        color:#999999;
        text-align:center;
    }
    .recharge-box .tip .protocol{
        color:#FF3418;
    }
</style>